<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0">

      </el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login_form" :model="loginForm" :rules="loginRules" ref="loginFormRef">
          <h1>登录</h1>
          <h2>欢迎登录系统</h2>
          <ElFormItem prop="username">
            <ElInput placeholder="请输入用户名" v-model="loginForm.username" :prefix-icon="User">
            </ElInput>
          </ElFormItem>
          <ElFormItem prop="userpwd">
            <ElInput placeholder="请输入密码" v-model="loginForm.userpwd" type="password" :prefix-icon="Lock" show-password>
            </ElInput>
          </ElFormItem>

          <ElFormItem>
            <ElButton type="primary" @click="login(loginFormRef!)" style="width: 100%;" :loading="loading">登录</ElButton>
          </ElFormItem>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ElInput, ElMessage, ElNotification, FormInstance } from 'element-plus';
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import useUserStore from '@/store/modules/user';
import { useRoute, useRouter } from 'vue-router';
import { getTimeToString } from '@/utils/timeHelp';

const loginForm = reactive({
  //用户名
  username: 'admin',
  //密码
  userpwd: '111111'
})

const loginRules = {
  //用户名
  username: [{
    required: true, message: '请输入用户名', trigger: 'blur'
  }],
  //密码
  userpwd: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

//登录按钮状态
let loading = ref(false)

//声明仓库
const userStore = useUserStore()

//获取路由
const router = useRouter()
const route = useRoute()

//表单
const loginFormRef = ref<FormInstance>()

const login = async (FormRef: FormInstance) => {
  await FormRef.validate(async (result, fields) => {

    if (result) {
      loading.value = true
      //接口调用可以用 .then语法 或者 try catch语法

      try {
        await userStore.userLogin({
          username: loginForm.username,
          password: loginForm.userpwd
        })

        if (route.query.redirect) {
          router.push({ path: route.query.redirect as string })
          // console.log(route);

        } else {
          router.push('/')
        }

        ElNotification.success({
          message: '登录成功',
          title: getTimeToString() + '欢迎回来',
          duration: 2500
        })

        loading.value = false
      } catch (error) {
        // console.log(error);
        ElNotification.error({
          title: '登录提示',
          message: (error as Error).message,
          duration: 2000
        })

        loading.value = false
      }
    } else {
      console.log('error submit!', fields)
    }

  })


}


</script>

<style scoped lang="scss">
.login_container {
  background: url('@/assets/images/login_bg.jpg') no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;


  .login_form {
    background-color: rgba($color: #000000, $alpha: 0.2);
    width: 60%;
    position: relative;
    top: 30vh;
    border-radius: 10px;
    padding: 40px;

    margin: 0 auto;

    h1 {
      color: aliceblue;
      text-align: center;
      font-size: 40px
    }

    h2 {
      color: aliceblue;
      margin: 20px 0;
      font-size: 20px;
    }
  }
}
</style>